<template>
<div class="detail">
  <!-- 轮播图 -->
  <Swiper :banner-arr="bannerArr"></Swiper>
   <!-- 分享 -->
   <van-icon name="share" @click="showShare = true"/>
    <van-icon name="revoke" @click="$router.go(-1)"/>
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options"/>
</div>
<!-- 产品价格 -->
<div class="box">
  <h4> $ {{originprice}} </h4>
  <h3>{{proname}}</h3>
</div>

 <!-- 加入 购物车立即购买 -->
 <van-action-bar>
    <van-action-bar-icon icon="cart-o" text="购物车" :badge="goodsCount1" @click="$router.push('/cart')" />

    <van-action-bar-button type="warning" text="加入购物车" @click="addCarFn" />

    <van-action-bar-button type="danger" text="立即购买" @click="buyFn" />
  </van-action-bar>



</template>

<script lang='ts' setup>
import Swiper from '@/components/Swiper.vue'
import {ref} from 'vue'
import {getDetailsData,addCartApi} from '@/api/detail'
import { useRoute } from 'vue-router'
import { showToast } from 'vant';

// 轮播图数组
const bannerArr = ref<Array<{}>>([])
const route = useRoute()
console.log('route',route);
console.log('proid',route.params.proid);

// let id = ref(route.params.proid)
// console.log('proid',id.value);
// 分享面板
const showShare = ref(false);
const options = [
  [
    { name: '微信', icon: 'wechat' },
    { name: '朋友圈', icon: 'wechat-moments' },
    { name: '微博', icon: 'weibo' },
    { name: 'QQ', icon: 'qq' },
  ],
  [
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
    { name: '小程序码', icon: 'weapp-qrcode' },
  ],
];

// 价格
const originprice = ref<number>(0)
// 产品名字
const proname = ref<string>('')

// 发送数据请求 -- 详情页
getDetailsData({proid: String(route.params.proid)}).then(res=>{
  console.log(res);})
getDetailsData({proid:(route.params.proid as string)}).then(res=>{
  console.log('detailres',res);
  const {banners} = res.data.data
  bannerArr.value= banners[0].split(',')
  // console.log(bannerArr);
  originprice.value = res.data.data.originprice
  proname.value = res.data.data.proname
  
})
// 立即购买
const buyFn = ()=>{
  showToast('嘻嘻 该功能并没做');
}
const num = ref<number>(1)  //初始购买数量
// 购物车数量
const goodsCount1 = ref<number>(0)
// 调用加入购物车接口
const addCarFn=()=>{
  addCartApi({
    userid:'',
    proid:route.params.proid.toString(),
    num:num.value  //加入购物车数量
  }).then(res=>{
    console.log(res);
    

  })
}






</script>
 
<style lang='scss' scoped>
.detail{
 position: relative;
 .van-icon{
   position: absolute;
   right: 15px;
   top:15px;
   border: 2px dashed black;
   border-radius: 50%;
   font-size:30px;
 }
 .van-icon:nth-of-type(2){
   right: 330px;
 }
}
.box{
  background-color:#f6f6f6;
  padding:0 10px ;
  h4{
    color:red;
   
  }
}
</style>